import React from 'react';
import { useStore2 } from '../../hooks';
import { isCheckBoxType } from '../../utils';

var Title = function Title(_ref) {
  var labelClass = _ref.labelClass,
      labelStyle = _ref.labelStyle,
      schema = _ref.schema,
      displayType = _ref.displayType;

  var _useStore = useStore2(),
      globalDisplayType = _useStore.displayType,
      readOnly = _useStore.readOnly;

  var title = schema.title,
      description = schema.description,
      required = schema.required,
      type = schema.type;
  var isObjType = type === 'object';

  var _displayType = schema.displayType || displayType || globalDisplayType || 'column';

  return /*#__PURE__*/React.createElement("div", {
    className: labelClass,
    style: labelStyle
  }, title ? /*#__PURE__*/React.createElement("label", {
    className: "fr-label-title ".concat(isCheckBoxType(schema, readOnly) || _displayType === 'column' ? 'no-colon' : '') // checkbox不带冒号
    ,
    title: title
  }, required === true && /*#__PURE__*/React.createElement("span", {
    className: "fr-label-required"
  }, " *"), /*#__PURE__*/React.createElement("span", {
    className: "".concat(isObjType ? 'b' : '', " ").concat(_displayType === 'column' ? 'flex-none' : '')
  }, /*#__PURE__*/React.createElement("span", {
    dangerouslySetInnerHTML: {
      __html: title
    }
  })), description && (_displayType === 'row' ? /*#__PURE__*/React.createElement("span", {
    className: "fr-tooltip-toggle",
    "aria-label": description
  }, /*#__PURE__*/React.createElement("i", {
    className: "fr-tooltip-icon"
  }), /*#__PURE__*/React.createElement("div", {
    className: "fr-tooltip-container"
  }, /*#__PURE__*/React.createElement("i", {
    className: "fr-tooltip-triangle"
  }), description)) : _displayType === 'inline' ? null : /*#__PURE__*/React.createElement("span", {
    className: "fr-desc ml2"
  }, "(\xA0", description, "\xA0)"))) : null);
};

export default Title;